<template>
        <button @click="isShow = true">显示弹窗</button>
        <!-- 找到body标签把下面的标签语句传送到body那一层 -->
        <teleport to="body">
    <div class="window" v-show="isShow">
        <div id="tip">弹窗提示</div>
        <div class="del"><a @click="isShow = false">×</a></div>
        <p>嘿嘿，你在干什么啊</p>
    </div>
    </teleport>
</template>

<script lang="ts">
export default {
name:'Window'
}
</script>

<script setup lang="ts">
import { ref } from 'vue';

let isShow = ref(false)

</script>

<style lang="css">
.window{
    height: 200px;
    width: 300px;
    background-color:bisque;
    position: fixed;
    left: 50%;
    top: 30%;
    text-align: center;
}
.window #tip{
    display: inline-block;
    background-color: red;
    font-size: 30px;
}
.del{
    display:inline-block;
    position: absolute;
    right: 0%;
}
</style>